<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="category">
        <div class="categoryNavt">
            <div>
                <div><span class="glyphicon glyphicon-folder-close"></span></div>
                <div>通知管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-folder-close"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    通知管理
                </div>
            </div>
        </div>
        <div class="storeData">
            <div class="storeNav">
                <div class="seekStore">
                </div>
                <div @click="addPopupClick" class="addStore">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="storeDetails" v-loading.body="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div>通知主题</div>
                        <div>通知内容</div>
                        <div>通知时间</div>
                        <div>操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>{{item.subject}}</div>
                        <div>{{item.content}}</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div>
                            <small @click="anewClick(index)"><span class="glyphicon glyphicon-arrow-up"></span>重新发送</small>
                            <small @click="deleteClick(index)">
                                <template>
                                   <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                                </template>
                            </small>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSizeNum"
                                :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" v-loading.body="adding" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-show="addShow">
                    <div class="popupTitle">
                        <h2>添加通知</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>通知主题：</div>
                        <div class="subject">
                            <textarea v-model="subjectMessage" placeholder="请输入通知主题，最多100字"></textarea>
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>通知内容：</div>
                        <div class="content">
                            <textarea v-model="contentMessage" placeholder="请输入通知内容，最多200字"></textarea>
                        </div>
                    </div>
                    <div class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="addOper">
                        <button @click="addClick">添加</button>
                        <button @click="callClick">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    require('../../../config/config.js')
    import { mapActions } from 'vuex'
    export default {
        name: 'category',
        data() {
            return {
                promptStr: '带 * 号为必填项',
                isAddPopup: true,
                isShowAdd: true,
                addShow: false,
                // 商户数组
                items: [
                ],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                nullShow: true,
                loading: false,
                adding: false,
                // 添加用户对象
                typeName: '',
                allIndex: '',
                showUpImage: false,
                contentMessage: '',
                subjectMessage: ''
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            },
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')
        },
        methods: {
            // 商户设置每页个数
            handleSizeChange(val) {
                var self = this;
                self.loading = true
                self.pageSizeNum = val
                self.getMessageAll({
                    store_id: 'system',
                    page_size: val,
                    number: 1
                }).then((data) => {
                    self.loading = false

                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            // 初始化分页
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 商户点击分页
            handleCurrentChange(val) {
                var self = this;
                self.loading = true
                self.getMessageAll({
                    store_id: 'system',
                    page_size: self.pageSizeNum,
                    number: val
                }).then((data) => {
                    self.loading = false

                    if (data.data.code == "200") {
                        if (data.data.data.content.length > 0) {
                            self.nullShow = false
                            // 初始化分页
                            self.items = data.data.data.content
                            self.totalNum = data.data.data.totalElements
                        } else {
                            self.nullShow = true
                        }
                    }
                }).catch(msg => console.log(msg))
            },
            // 关闭弹窗
            callClick() {
                this.addShow = false;
                this.isShowAdd = true
                this.typeName = ''
                this.ipImage = ''
                this.imgUrl = ''
                this.showUpImage = false;
                this.contentMessage = ''
                this.contentMessage = ''
            },
            // 弹出添加框
            addPopupClick() {
                this.isShowAdd = false;
                this.addShow = true;
                this.contentMessage = ''
                this.contentMessage = ''
            },
            // 添加通知
            addClick() {
                var self = this;
                // 添加通知
                if (self.subjectMessage.length <= 100 && self.contentMessage.length <= 200) {
                    self.promptStr = '带 * 号为必填项'
                    var userId = sessionStorage.getItem('userId')
                    self.adding = true
                    self.getMessageAdd({
                        opid: userId,
                        subject: self.subjectMessage,
                        content: self.contentMessage,
                        storeId: 'system'
                    }).then((data) => {

                        self.adding = false
                        if (data.data.code == "200") {
                            self.isShowAdd = true
                            self.isAddShow = false
                            self.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            self.contentMessage = ''
                            self.contentMessage = ''
                            self.loading = true
                            self.getMessageAll({
                                store_id: 'system',
                                page_size: 10,
                                number: 1
                            }).then((data) => {
                                self.loading = false

                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (self.subjectMessage.length > 100) {
                        this.promptStr = '通知主题字数不能超过100'
                    } else if (self.contentMessage.length > 200) {
                        this.promptStr = '通知内容字数不能超过200'
                    }
                }
            },
            // 重新发送通知
            anewClick(index) {
            },
            // 删除通知
            deleteClick(index) {
                var self = this;
                console.log(self.items[index].id)
                var userId = sessionStorage.getItem('userId')
                var nameStr = "此操作将删除该通知,是否继续 ?"
                self.$confirm(nameStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.getMessageDel({
                        opid: userId,
                        msgid: self.items[index].id
                    }).then((data) => {

                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getMessageAll({
                                store_id: 'system',
                                page_size: self.pageSizeNum,
                                number: 1
                            }).then((data) => {
                                self.loading = false

                                if (data.data.code == "200") {
                                    if (data.data.data.content.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data.content
                                        self.totalNum = data.data.data.totalElements
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
             ...mapActions(['getMessageAdd','getMessageAll','getMessageDel'])
        }
    }

</script>

<style scoped src="../../assets/css/message.css">

</style>